<template>
  <el-card class="demo-collapse mt-10">
    <transition>
      <div class="filter-container" :class="{fold: !show3}">
        <el-row v-for="chose in choisesList" v-model="show3">
          <el-col :span="2">
            <div class="grid-content ep-bg-purple npm ">{{ chose.label }}</div>
          </el-col>
          <el-col :span="22">
            <div class="grid-content ep-bg-purple-light course_btn course_msg"
                 @click="onClick(chose.choises, chosemsg,chose.name)" :class="{'is-active': chosemsg.isActive}"
                 v-for="chosemsg in chose.choises">
              {{ chosemsg.name }}
            </div>
          </el-col>
        </el-row>
      </div>
    </transition>
    <el-link :underline="false" class="open" @click="show3 = !show3"><span>{{ show3 ? '收起' : '展开全部' }}</span>
      <!--      <span v-if="open">收起</span><span v-else>展开全部</span>-->
    </el-link>
  </el-card>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {ElMessage} from 'element-plus'
const props = defineProps(['choisesList'])
const emit = defineEmits(['search'])
const show3 = ref(true)

// 点击筛选条件
const onClick = (choises: any, chosemsg:any, choseName:any) => {
  if (!chosemsg.isActive) {
    let activeList = choises.filter((item:any) => item.isActive)
    if (activeList.length >= 3) return ElMessage('同一筛选条件最多选择3个')
  }
  chosemsg.isActive = !chosemsg.isActive
  getListSearch()
}

const getListSearch = ()=>{
  let  newList = props.choisesList.map((item:any)=>{
    const tempList = item.choises.filter((item:any)=>{
      return item.isActive
    })
    return {
      filterCode: item.name,
      filterValue: tempList.map((item:any)=>item.id)
    };
  })
  newList = newList.filter((item:any)=>item.filterValue.length>0)
  console.log(newList)
  emit('search',newList)
}



</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.filter-container {
  overflow: hidden;

  &.fold {
    height: 155px;
  }
}

.grid-content {
  border-radius: 4px;
  //min-height: 36px;
}

.course_btn {
  float: left;
  margin-right: 24px;
  color: #7d8090;
  font-size: 14px
}

.course_label {
  padding: 7px 0;
  color: #b1b5c1;
  font-weight: 100;
}

.course_msg {
  font-size: 14px;
  color: #7d8090;
  padding: 7px 13px;
  margin: 0 24px 10px 0;
  cursor: pointer;

  &.is-active {
    background-color: #f93684;
    color: #fff;
  }
}

.open {
  padding: 20px 0;
  text-align: center;
  width: 100%;
  color: #f93684;
  cursor: pointer
}



</style>
